<template>
  <j-modal
    :visible='visible'
    :width='800'
    cancelText='关闭'
    style='top:50px;'
    switchFullscreen
    title='选择客户'
    @cancel='close'
    @ok='handleSubmit'
  >
    <a-tabs :active-key='activeKey' @tabClick='tabClick'>
      <a-tab-pane key='terminal' tab='门店'>
        <a-col >
          <a-card :bordered='false'>
            <a-form layout='inline' @keyup.enter.native='searchQuery'>
              <a-row :gutter='24'>
                <a-col :md='7' :sm='24'>
                  <a-form-item>
                    <a-input v-model='queryParam.terminalCode' placeholder='门店编码'></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md='7' :sm='24'>
                  <a-form-item>
                    <a-input v-model='queryParam.terminalName' placeholder='门店名称'></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md='7' :sm='24'>
                  <a-button icon='search' style='margin-top: 5px' type='primary' @click='searchQuery'>查询</a-button>
                  <a-button icon="reload" style="margin-left: 8px" type="primary" @click="searchReset">重置</a-button>
                </a-col>
              </a-row>
            </a-form>
            <a-table
              ref='table'
              :columns='terminalsColumns'
              :dataSource='terminals'
              :loading='loading'
              :pagination='ipagination'
              :rowSelection='{selectedRowKeys: terminalSelectedRowKeys,onSelect: onSelect1,type:"radio"}'
              :scroll="{
                      x:'max-content'
                    }"
              bordered
              rowKey='terminalCode'
              size='small'
              tableLayout='auto'
              :customRow="customRowFn"
              @change='handleTableChange'
            >
            </a-table>

          </a-card>
        </a-col>
      </a-tab-pane>
      <a-tab-pane key='cust' tab='客户'>
        <a-col >
          <a-card :bordered='false'>
            <a-form layout='inline' @keyup.enter.native='searchQuery'>
              <a-row :gutter='24'>
                <a-col :md='7' :sm='24'>
                  <a-form-item>
                    <a-input v-model='queryParam.custCode' placeholder='客户编码'></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md='7' :sm='24'>
                  <a-form-item>
                    <a-input v-model='queryParam.custName' placeholder='客户名称'></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md='7' :sm='24'>
                  <a-button icon='search' style='margin-top: 5px' type='primary' @click='searchQuery'>查询</a-button>
                  <a-button icon="reload" style="margin-left: 8px" type="primary" @click="searchReset">重置</a-button>
                </a-col>
              </a-row>
            </a-form>
            <a-table
              ref='table'
              :columns='custsColumns'
              :dataSource='custs'
              :loading='loading'
              :pagination='ipagination'
              :rowSelection='{selectedRowKeys: custSelectedRowKeys,onSelect: onSelect2,type:"radio"}'
              :scroll="{
                      x:'max-content'
                    }"
              bordered
              rowKey='custCode'
              size='small'
              tableLayout='auto'
              :customRow="customRowFn"
              @change='handleTableChange'
            >
            </a-table>

          </a-card>
        </a-col>

      </a-tab-pane>

    </a-tabs>
  </j-modal>
</template>

<script>
import { filterObj } from '@/utils/util'
import { queryDepartTreeList, getUserList, queryUserByDepId } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
import { PageListMixin } from '@/mixins/PageListMixin'
export default {
  name: 'StoreDealer',
  mixins: [PageListMixin],
  data(){
    return{
      dataSource:[],
      custType:'', //门店or客户
      visible:false,
      queryParam: {
        code: '',
        name: ''
      },
      activeKey: 'terminal',
      //门店
      terminals: [],
      terminalsColumns: [
        {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '门店编码',
          align: 'center',
          dataIndex: 'terminalCode'
        },
        {
          title: '门店名称',
          align: 'center',
          dataIndex: 'terminalName'
        },
      ],
      terminalSelectedRowKeys: [],
      terminalSelectionRows: [],
    //  客户
      custs: [],
      custsColumns: [
        {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '客户编码',
          align: 'center',
          dataIndex: 'custCode'
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'custName'
        },
      ],
      custSelectedRowKeys: [],
      custSelectionRows: [],
    }
  },
  watch:{
    activeKey() {
      if (this.activeKey !== 'terminal') {
        this.loadData()
      }
    }
  },
  methods:{
    /**
     * 标签页的选中事件
     * @param name
     */
    tabClick(name) {
      this.activeKey = name
      console.log(name)
    },
    showModal() {
      this.visible = true
      // this.form.resetFields()
    },
    searchReset(num) {
      let that = this
      this.queryParam = {}
      if (num !== 0) {
        that.loadData(1)
      }
    },
    close() {
      this.visible = false
      this.searchReset(1)
    },
    handleSubmit() {
      let that = this
      that.$emit('ok', {
        dataSource: that.dataSource,
        custType: that.custType,
      })
      that.searchReset(0)
      that.close()
    },
    /**
     * 获取查询参数
     * @returns {*}
     */
    getQueryParams() {
      let param = Object.assign({}, this.queryParam)
      param.current = this.ipagination.current
      param.size = this.ipagination.pageSize
      return filterObj(param)
    },
    /**
     * 手动勾选/取消分类
     * @param record
     * @param selected
     * @param selectedRows
     * @param nativeEvent
     */
    onSelect1(record, selected, selectedRows, nativeEvent) {
      this.terminalSelectedRowKeys = selectedRows.map(row => row[this.activeKey + 'Code'])
      this.custSelectedRowKeys = []
      this.dataSource = { ...record }
      this.custType = 1
        console.log(this.dataSource)
    },
    onSelect2(record, selected, selectedRows, nativeEvent) {
      this.custSelectedRowKeys = selectedRows.map(row => row[this.activeKey + 'Code'])
      this.terminalSelectedRowKeys = []
      this.dataSource = { ...record }
      this.custType = 2
      console.log(this.dataSource)
    },
    customRowFn(record) {
      return {
        style: {
          'cursor': 'pointer'
        },
        on: {
          click: () => {
            this[this.activeKey + 'SelectedRowKeys'] = [record].map(row => row[this.activeKey + 'Code'])
            this.dataSource = {...record}
            },
            dblclick: () => {
              this.dataSource = {...record};
              this.handleSubmit()
            },
        }
      }
    },
    /**
     * 覆盖mixin的loadData方法
     * @param arg
     * @returns {Promise<void>}
     */
    async loadData(arg) {
      let params = this.getQueryParams()//查询条件
      if (arg === 1) {
        this.ipagination.current = 1
      }
      let url
      if (this.activeKey === 'terminal') {
        this.custType = 1
        url = '/cnTerminalController/custFindTerminalList'
      }
      if (this.activeKey === 'cust') {
        this.custType = 2
        url = '/customerController/getPageList'
      }
      this.loading = true
      await postAction(url, { ...params }).then((res) => {

        console.log(res)
        if (res.success) {
          this[this.activeKey + 's'] = res.result.records
          this.ipagination.total = res.result.total
        }
      }).finally(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style scoped>

</style>